<template>
	<view class="comment-eg">
		<view class="" style="padding-bottom:40upx;">
			<hb-comment ref="hbComment" @add="add" @del="del" @like="like" @focusOn="focusOn" :deleteTip="'确认删除？'"
				:commentNum="commentNum" :cmData="commentData" v-if="commentData"></hb-comment>
		</view>

		<goodAction>
			<view style="color: #808080; border-radius: 20upx; border: 1pt solid black;margin-left: 15upx; width: 45%;"
				class="comment" @click="commentInput">
				<uni-icons type="chatboxes"></uni-icons>说点什么...
			</view>
			<view style="margin-left: 60upx;" class="icon">
				<uni-icons color="#EE0A24" @click="likeContent" v-show="isLike" style="margin: 0 15upx ;"
					type="heart-filled" size="25">
				</uni-icons>
				<uni-icons @click="likeContent" v-show="!isLike" style="margin: 0 15upx ;" type="heart" size="25">
				</uni-icons>
				{{likeNum}}
				<uni-icons style="margin: 0 35upx ;" type="chat" size="25"></uni-icons>
				{{commentNum}}
				<uni-icons style="margin: 0 45upx ;" v-show="!isCollect" type="star" size="20" @click="collect()">
				</uni-icons>
				<uni-icons style="margin: 0 45upx ;" color="yellow" v-show="isCollect" type="star-filled" size="20"
					@click="collect()"></uni-icons>
			</view>
		</goodAction>

	</view>

	</view>
</template>

<script>
	import hbComment from './hb-comment.vue'
	export default {
		components: {
			'hb-comment':hbComment,
		},
		name: 'comment-eg',
		props: {
			articleId: {
				type: String,
				default: () => {
					return null;
				}
			},
			bottom: {

			}
		},
		watch: {
			articleId: {
				handler: function(newVal, oldVal) {
					if (newVal) {
						console.log("幽灵", newVal);
						let replyData = newVal.split(':');
						
						this.getComment(replyData[0],replyData[1]);
					}
				}
			},
			bottom: {
				handler: function(newVal, oldVal) {
					if (newVal) {
						this.isCollect = newVal.isCollect
						this.isLike = newVal.isLike
						this.likeNum = newVal.likeNum
						// this.commentNum = newVal.commentNumber
					}
				},
				immediate: true
			}
		},
		data() {
			return {
				"contentId":"",
				"type":"",
				"commentNum": 0,
				"isLike": false,
				"likeNum": 0,
				"isCollect": false,
				"total": 0,
				"page": 1,
				"res": {
					"readNumer": 193,
					"commentList": []
				},
				"commentData": null,
				"reqFlag": false // 请求标志，防止重复操作，true表示请求中

			}
		},
		//分页查询
		onReachBottom() {
			console.log("aaaa")
		},
		methods: {
			//收藏
			collect() {
				this.$request('/post/postCollectUp?postId=' + this.contentId, {}, 'GET')
					.then(res => {
						this.isCollect = res==1
						console.log(res);
					}).catch(err => {
						console.log(err);
					})
			},
			//点赞内容
			likeContent() {
				this.$request('/post/postThumbUp?postId=' + this.contentId, {}, 'GET')
					.then(res => {
						this.likeNum = this.likeNum+ res
						this.isLike = res==1
						console.log(res);
					}).catch(err => {
						console.log(err);
					})
			},
			//分页查询
			reachBottom() {
				// if (this.res.commentList.length < this.total) {
				// 	this.page += 1
				// 	this.$request('/comments/getCommentByPostId?pageSize=10&page=' + this.page + '&post_id=' + this
				// 			.articleId, {}, 'GET', {
				// 				"satoken": uni.getStorageSync("token")
				// 			})
				// 		.then(res => {
				// 			console.log(res);
				// 			// 下边假装请求成功
				// 			// let res = {
				// 			// 	"readNumer": 193,
				// 			// 	"commentList": []
				// 			// }
				// 			this.total = res.total
				// 			this.res.commentList = this.res.commentList.concat(res.records)
				// 			this.commentData = {
				// 				"readNumer": this.res.readNumer,
				// 				"commentSize": this.res.commentList.length,
				// 				"comment": this.getTree(this.res.commentList)
				// 			};
				// 		}).catch(err => {
				// 			console.log(err);
				// 		})
				// } else {
				// 	console.log("到底啦");
				// }
			},
			commentInput() {
				this.$refs.hbComment.commentInput();
			},
			// 登录校验
			checkLogin() {
				// TODO 此处填写登录校验逻辑
				let token = uni.getStorageSync("token");
				if (token != '') {

					this.$request('/user/isLogin', {}, 'GET', {
							"satoken": uni.getStorageSync("token")
						})
						.then(res => {
							if (res.msg) {
								return true;
							} else {
								uni.showModal({
									title: '提示',
									content: '请先登录',
									confirmText: '前往登录',
									success: function(res) {
										if (res.confirm) {
											uni.clearStorageSync();
											uni.switchTab({
												url: '/pages/tabbar/tabbar-5/tabbar-5'
											})
										}
									}
								});
							}
						}).catch(err => {
							console.log(err);
						})

				} else {
					uni.showModal({
						title: '提示',
						content: '请先登录',
						confirmText: '前往登录',
						success: function(res) {
							if (res.confirm) {
								uni.switchTab({
									url: '/pages/tabbar/tabbar-5/tabbar-5'
								})
							}
						}
					});
					return false;
				}
			},
			// 输入框聚焦
			focusOn() {
				// this.checkLogin();
			},
			// 获取评论
			getComment(articleId,type) {
				// TODO 接入真实接口
				this.type = type
				this.contentId = articleId
				this.page = 1
				this.$request('/comment/list?&page=' + this.page + '&contentId=' + articleId+ '&type=' + type, {},
						'GET')
					.then(res => {
						console.log(res);
						// 下边假装请求成功
						// let res = {
						// 	"readNumer": 193,
						// 	"commentList": []
						// }
						
						this.commentNum = res.records.length
						this.commentData = {
							"readNumer": 0,
							"commentSize": res.total,
							"comment": this.getTree(res.records)
						};
						// this.res.commentList = res.records
						// this.total = res.total
						// this.commentData = {
						// 	"postId": this.res.readNumer,
						// 	"commentSize": this.res.commentList.length,
						// 	"comment": this.getTree(this.res.commentList)
						// };
					}).catch(err => {
						console.log(err);
					})
			

				// let res = {
				// 	"tmplIds": ["DaoriifZwNdKgYDU6D6TGcL5Nq4ySc7aGo0eCVrBcsI",
				// 		"faN-JsVC0cYVMnBz6TXR9m4tZl6f-3RHY31tvT0IkjA"
				// 	],
				// 	"readNumer": 193,
				// 	"commentList": [{
				// 			"id": 1,
				// 			"owner": false,
				// 			"hasLike": false,
				// 			"likeNum": 2,
				// 			"avatarUrl": "https://inews.gtimg.com/newsapp_ls/0/13797755537/0",
				// 			"nickName": "超长昵称超长...",
				// 			"content": "啦啦啦啦",
				// 			"parentId": null,
				// 			"createTime": "2021-07-02 16:32:07"
				// 		}, {
				// 			"id": 1,
				// 			"owner": false,
				// 			"hasLike": false,
				// 			"likeNum": 2,
				// 			"avatarUrl": "https://inews.gtimg.com/newsapp_ls/0/13797755537/0",
				// 			"nickName": "超长昵称超长...",
				// 			"content": "啦啦啦啦",
				// 			"parentId": null,
				// 			"createTime": "2021-07-02 16:32:07"
				// 		}, {
				// 			"id": 1,
				// 			"owner": false,
				// 			"hasLike": false,
				// 			"likeNum": 2,
				// 			"avatarUrl": "https://inews.gtimg.com/newsapp_ls/0/13797755537/0",
				// 			"nickName": "超长昵称超长...",
				// 			"content": "啦啦啦啦",
				// 			"parentId": null,
				// 			"createTime": "2021-07-02 16:32:07"
				// 		},
				// 		{
				// 			"id": 2,
				// 			"owner": false,
				// 			"hasLike": false,
				// 			"likeNum": 2,
				// 			"avatarUrl": "https://inews.gtimg.com/newsapp_ls/0/13797761970/0",
				// 			"nickName": "寂寞无敌",
				// 			"content": "我是评论的评论",
				// 			"parentId": 1,
				// 			"createTime": "2021-07-02 17:05:50"
				// 		},
				// 		{
				// 			"id": 4,
				// 			"owner": true,
				// 			"hasLike": true,
				// 			"likeNum": 1,
				// 			"avatarUrl": "https://inews.gtimg.com/newsapp_ls/0/13797763270/0",
				// 			"nickName": "name111",
				// 			"content": "评论啦啦啦啦啦啦啦啦啦啦",
				// 			"parentId": null,
				// 			"createTime": "2021-07-13 09:37:50"
				// 		},
				// 		{
				// 			"id": 5,
				// 			"owner": false,
				// 			"hasLike": false,
				// 			"likeNum": 0,
				// 			"avatarUrl": "https://inews.gtimg.com/newsapp_ls/0/13797755537/0",
				// 			"nickName": "超长昵称超长...",
				// 			"content": "超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论超长评论",
				// 			"parentId": null,
				// 			"createTime": "2021-07-13 16:04:35"
				// 		},
				// 		{
				// 			"id": 13,
				// 			"owner": false,
				// 			"hasLike": false,
				// 			"likeNum": 0,
				// 			"avatarUrl": "https://inews.gtimg.com/newsapp_ls/0/13797755537/0",
				// 			"nickName": "超长昵称超长...",
				// 			"content": "@寂寞无敌 你怕不是个大聪明",
				// 			"parentId": 1,
				// 			"createTime": "2021-07-14 11:01:23"
				// 		}
				// 	]
				// };
				// this.commentNum = res.commentList.total
				// this.commentData = {
				// 	"readNumer": res.readNumer,
				// 	"commentSize": res.commentList.length,
				// 	"comment": this.getTree(res.commentList)
				// };
			},
			// 新增评论
			add(req) {
				console.log("req.content:" + req.content)
				console.log("req.pId:" + req.pId)
				console.log("this.articleId:" + this.articleId)
				console.log("this.type:" + this.type)
	
					this.$request('/comment/add', {
							contentId: this.contentId,
							type:this.type,
							content: req.content,
							parentId: req.pId == null ? null : req.pId
						}, 'POST')
						.then(res => {
				
							console.log(res);
							this.reqFlag = false;
							this.commentNum = this.commentNum + 1
							this.$refs.hbComment.addComplete();
							this.getComment(this.contentId,this.type);
				
						}).catch(err => {
							console.log(err);
						})
					if (this.reqFlag) {
						uni.showToast({
							title: '操作频繁',
							duration: 1000
						});
						return
					}
					this.reqFlag = true;
				
			
			},
			// 点赞评论
			like(commentId) {

				this.$request('/comment/detailThumbUp?commentId=' + commentId, {}, 'GET')
					.then(res => {
						console.log(res);
						this.reqFlag = false;
						this.$refs.hbComment.likeComplete(commentId);
					}).catch(err => {
						console.log(err);
					})
				if (this.reqFlag) {
					uni.showToast({
						title: '操作频繁',
						duration: 1000
					});
					return
				}
				this.reqFlag = true;

				// TODO 接入真实接口
				// this.$u.api.commentLike(commentId).then(res => {
				// 	this.$refs.hbComment.likeComplete(commentId);
				// 	this.reqFlag = false;
				// }).catch(res => {
				// 	this.reqFlag = false;
				// })
				// 下边假装请求成功
				// this.reqFlag = false;
				// this.$refs.hbComment.likeComplete(commentId);
			},
			// 删除评论
			del(commentId) {
				console.log("aaaa");
				// if (!this.checkLogin()) {
				// 	return
				// }
				if (this.reqFlag) {
					uni.showToast({
						title: '操作频繁',
						duration: 1000
					});
					return
				}
				this.reqFlag = true;
				this.$request('/comment/remove', {
					"id":commentId
				},
						'POST')
					.then(res => {
						uni.showToast({
							title: '删除成功',
							duration: 1000
						});
						this.reqFlag = false;
						this.$refs.hbComment.deleteComplete(commentId);

						this.commentNum = this.commentNum - 1
						console.log(res);
					}).catch(err => {
						console.log(err);
					})
				// TODO 接入真实接口
				// this.$u.api.commentDelete(commentId).then(res => {
				// 	this.reqFlag = false;
				// 	this.$refs.hbComment.deleteComplete(commentId);
				// }).catch(res => {
				// 	this.reqFlag = false;
				// })
				// 下边假装请求成功

			},
			// 列表按照父子转换成树
			getTree(data) {
				let result = [];
				let map = {};
				data.forEach(item => {
					map[item.id] = item;
				});
				data.forEach(item => {
					let parent = map[item.parentId];
					if (parent) {
						(parent.children || (parent.children = [])).push(item);
					} else {
						result.push(item);
					}
				});
				return result;
			}
		}
	};
</script>

<style lang="scss">
	.bar {
		height: 50px;
		display: flex;

		.bar_item {
			width: 20%;
			padding: 8px 0px 12px;
			text-align: center;
			font-size: 10px;
			color: black;
			display: flex;
			flex-direction: column; //修改轴方向
			align-items: center; //上下居中

			image {
				width: 15px;
				height: 15px;
			}
		}

		.bar_item_box {
			width: 40%;
			padding: 8px 0px 12px;
			text-align: center;
			font-size: 10px;
			color: black;
			display: flex;
			flex-direction: column; //修改轴方向
			align-items: center; //上下居中

			image {
				width: 15px;
				height: 15px;
			}
		}

		.bar_item1 {
			width: 30%;
			font-size: 14px;
			color: black;
			text-align: center;
			line-height: 50px;
		}

	}

	.comment_box {
		text-align: center;
	}
</style>
